<template>
  <!-- 施工风险和施工计划的表单在集结完成前,流程状态为0可用  '' 未拿到后台数据 0 正常 1 施工结束 2 手动结束 -->
  <!-- 确定按钮  流程走到哪一步,哪一步的按钮可用,施工风险和施工计划的按钮在集结完成前都时可用的 -->
  <!-- switch开关  流程走到哪一步,哪一步的开关可用,确定之后状态不可更改 -->

  <div class="body_content content_bg" style="position: relative;">
    <div class="no-flow" v-if="baseInfo.flowNumber==''"></div>
    <el-card class="box-card">
      <span class="pro_name">
        <i class="pro_sign"></i>{{baseInfo.flowName}}</span>
      <!-- 项目概况 -->
      <div class="pro_first">
        <div>
          <span class="pro_first_title">项目名称</span>
          <p>{{baseInfo.projectName}}</p>
        </div>
        <div>
          <span class="pro_first_title">施工单位</span>
          <p>{{baseInfo.constructDeptName}}</p>
        </div>
        <div>
          <span class="pro_first_title">监理单位</span>
          <p>{{baseInfo.supervisorDeptName}}</p>
        </div>
        <div>
          <span class="pro_first_title">检测单位</span>
          <p>{{baseInfo.detectionDeptName}}</p>
        </div>
        <div>
          <span class="pro_first_title">项目时间</span>
          <p>{{baseInfo.contractDate===''?'':format(baseInfo.contractDate).substring(0,10)}}</p>
        </div>
      </div>
      <!-- 项目进度 -->
      <div class="pro_progress">
        <FlowSteps :data="baseInfo.flowProcesses" />
      </div>
      <div class="pro_first pro_first_second">
        <div>
          <span class="title">流程编号：</span>
          <span class="content">{{baseInfo.flowNumber}}</span>
        </div>
        <div>
          <span class="title">流程名称：</span>
          <span class="content">{{baseInfo.flowName}}</span>
        </div>
        <div>
          <span class="title">项目部门：</span>
          <span class="content">{{baseInfo.deptName}}</span>
        </div>
      </div>
      <!-- 施工风险 -->
      <div class="pro_second">
        <span class="title">施工风险</span>
        <el-form ref="riskForm" :model="riskForm" :rules="riskRules" size="small" label-width="100px" class="demo-form-inline pro_item">
          <el-row>
            <el-col :span="6">
              <el-form-item label="进场时间">
                <el-date-picker v-model="riskForm.approachDate"  format="yyyy-MM-dd HH:mm" type="datetime" placeholder="请选择进场时间" :disabled="checkflow(2, '新增')&&checkflow(2, '修改')"
                  style="width: 100%">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="进场路线">
                <el-input v-model="riskForm.approachPath" placeholder="请输入进场路线" :disabled="checkflow(2, '新增')&&checkflow(2, '修改')" style="width: 100%">
                </el-input>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="6">
              <el-form-item label="当前状态">
                <el-select v-model="riskForm.status" placeholder="活动区域" style="width: 100%" disabled>
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-col> -->
            <el-col :span="24" style="text-align: right">
              <el-form-item>
                <el-button type="warning" style="width: 80px" @click="riskSubmit" v-if="!(checkflow(2, '新增')&&checkflow(2, '修改'))">确认</el-button>
                <span v-if="riskForm.operator">操作人:{{riskForm.operator}}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- 施工计划 -->
      <div class="pro_second">
        <span class="title">施工计划</span>
        <el-form ref="planForm" :model="planForm" :rules="planRules" size="small" label-width="100px" class="demo-form-inline pro_item">
          <el-row>
            <el-col :span="6">
              <el-form-item label="施工单位">
                <el-input type="text" v-model="baseInfo.constructDeptName" placeholder="施工单位" disabled style="width: 100%">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="监理单位">
                <el-input type="text" v-model="baseInfo.supervisorDeptName" placeholder="监理单位" disabled style="width: 100%">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="申请日期" prop="applyDate">
                <el-date-picker v-model="planForm.applyDate" type="date" placeholder="请选择申请日期" :disabled="(checkflow(13, '新增')||checkflow(13, '修改'))?true:disableUpdatePlanAll"
                  style="width: 100%">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="执行经理" prop="execManager">
                <el-select v-model="planForm.execManager" placeholder="请选择执行经理" :disabled="(checkflow(13, '新增')||checkflow(13, '修改'))?true:disableUpdatePlanAll"
                  style="width: 100%">
                  <el-option :label="p.name" v-for="p in personsList" :value="p.userId" :key="p.userId"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="现场管理" prop="siteAdmin">
                <el-select v-model="planForm.siteAdmin" placeholder="请选择现场管理" :disabled="(checkflow(13, '新增')||checkflow(13, '修改'))?true:disableUpdatePlanAll"
                  style="width: 100%">
                  <el-option :label="p.name" v-for="p in personsList" :value="p.userId" :key="p.userId"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="技术负责" prop="techDirector">
                <el-select v-model="planForm.techDirector" placeholder="请选择技术负责" :disabled="(checkflow(13, '新增')||checkflow(13, '修改'))?true:disableUpdatePlanAll"
                  style="width: 100%">
                  <el-option :label="p.name" v-for="p in personsList" :value="p.userId" :key="p.userId"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="安全负责" prop="safeDirector">
                <el-select v-model="planForm.safeDirector" placeholder="请选择安全负责" :disabled="(checkflow(13, '新增')||checkflow(13, '修改'))?true:disableUpdatePlanAll"
                  style="width: 100%">
                  <el-option :label="p.name" v-for="p in personsList" :value="p.userId" :key="p.userId"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="安全员" prop="safetyOfficer">
                <el-select v-model="planForm.safetyOfficer" placeholder="请选择安全员" :disabled="(checkflow(13, '新增')||checkflow(13, '修改'))?true:disableUpdatePlanAll"
                  style="width: 100%">
                  <el-option :label="p.name" v-for="p in personsList" :value="p.userId" :key="p.userId"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="施工人数" prop="personNum">
                <el-input-number v-model="planForm.personNum" :min="0" :step="1" :disabled="isNotOverdue?((checkflow(13, '新增')||checkflow(13, '修改'))?true:disableUpdatePlan):true"
                  style="width: 100%"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="施工车数" prop="vehicleNum">
                <el-input-number v-model="planForm.vehicleNum" :min="0" :step="1" :disabled="isNotOverdue?((checkflow(13, '新增')||checkflow(13, '修改'))?true:disableUpdatePlan):true"
                  style="width: 100%"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="天气信息" prop="weatherContent">
                <el-input type="text" v-model="planForm.weatherContent" placeholder="天气信息" :disabled="(checkflow(13, '新增')||checkflow(13, '修改'))?true:disableUpdatePlanAll"
                  style="width: 100%">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="是否施工">
                <el-switch v-model="isconstruct" active-color="#13ce66" inactive-color="#ff4949" :disabled="(checkflow(13, '新增')||checkflow(13, '修改'))?true:disableUpdatePlanAll">
                </el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="施工设备" prop="deviceIds">
                <div>
                  <el-tag style="margin-right: 2px" type="info" v-for="(e,index) in planForm.deviceIds" :key="index" :closable="isNotOverdue?!((checkflow(13, '新增')||checkflow(13, '修改'))?true:disableUpdatePlan):false"
                    @close="removeEquipment(index)">{{e.commonName + 'x' + e.commonNum}}
                  </el-tag>
                  <el-button type="warning" style="height: 32px" :disabled="isNotOverdue?((checkflow(13, '新增')||checkflow(13, '修改'))?true:disableUpdatePlan):true"
                    @click="openModal">
                    <i class='fa fa-reorder'></i>
                  </el-button>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="!isconstruct">
              <el-form-item label="不施工备注" prop="remark">
                <el-input type="textarea" v-model="planForm.remark" placeholder="不施工备注" style="width: 100%" :disabled="(checkflow(13, '新增')||checkflow(13, '修改'))?true:disableUpdatePlan">
                </el-input>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="6">
              <el-form-item label="施工区域" prop="area">
                <el-input v-model="planForm.constructionContent.area" placeholder="请输入施工区域" :disabled="lead||baseInfo.status!==0" style="width: 100%">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="施工类型" prop="type">
                <el-select v-model="planForm.constructionContent.type" placeholder="请选择施工类型" :disabled="lead||baseInfo.status!==0" style="width: 100%">
                  <el-option label="今日" value="1"></el-option>
                  <el-option label="明日" value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="已完成" prop="completion">
                <el-input v-model="planForm.constructionContent.completion" placeholder="请输入已完成工作量" :disabled="lead||baseInfo.status!==0"
                  style="width: 100%">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="累计完成" prop="totalCompletion">
                <el-input v-model="planForm.constructionContent.totalCompletion" placeholder="请输入累计完成量" :disabled="lead||baseInfo.status!==0"
                  style="width: 100%">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="完成度" prop="percentCompletion">
                <el-input v-model="planForm.constructionContent.percentCompletion" placeholder="请输入完成度" :disabled="lead||baseInfo.status!==0"
                  style="width: 100%">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="施工时间" prop="date">
                <el-date-picker v-model="planForm.constructionContent.date" type="datetime" placeholder="请选择申请日期" :disabled="lead||baseInfo.status!==0"
                  style="width: 100%">
                </el-date-picker>
              </el-form-item>
            </el-col> -->
            <el-col :span="24" v-for="p in planForm.constructionContent" :key="p.type">
              <!-- v-if="showContent" -->
              <el-form-item :label="p.type===1?'今日计划':'明日计划'" :prop="p.type===1?'todayPlan':'tomorrowPlan'">
                <div style="position: relative">
                  <div style="position: absolute;top: 0;left: 0;width: calc(100% - 15px);height: 230px;background: transparent;z-index: 1000;" v-if="(checkflow(13, '新增')||checkflow(13, '修改'))?true :disableUpdatePlanAll"></div>
                  <Editor :ref="'ue'+p.type" :defaultMsg="p.content||''" :index="'editor'+p.type" :config="config" />
                  <div class="file-upload" @click="upload(p.type)"></div>
                  <input :id="'up'+p.type" type="file" style="display: none" @change="fileFull(p.type)" />
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="24" style="text-align: right">
              <el-form-item>
                <el-button type="warning" style="width: 80px" @click="planSubmit" v-if="isNotOverdue?!((checkflow(13, '新增')||checkflow(13, '修改'))?true:disableUpdatePlan):false">确认</el-button>
                <span v-if="planOperator[0]">操作人:{{planOperator[0]}}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- 监理单位确认 -->
      <div class="pro_second">
        <span class="title">监理单位确认</span>
        <el-form size="small" label-width="100px" class="demo-form-inline pro_item">
          <el-row>
            <el-col :span="24">
              <el-form-item>
                <span v-if="planForm.isconstruct===0 && isEnd">施工已取消!</span>
                <span v-if="planForm.isconstruct===0 && !isEnd">申请取消施工中!</span>
                <span v-else-if="checkFlowStatue(14) && isconstruct && nowProcessId !== 14">已确认施工计划符合规定要求!</span>
                <span v-else-if="nowProcessId === 14 && checkPower(14, '确认')">请确认施工计划是否符合要求......</span>
                <span v-else-if="nowProcessId === 14 && !checkPower(14, '确认')">等待确认施工计划是否符合要求......</span>
                <span v-else-if="!checkFlowStatue(14) && isconstruct">请等待......</span>
              </el-form-item>
            </el-col>
            <el-col :span="24" style="text-align: right">
              <el-form-item>
                <el-button type="warning" style="width: 80px" @click="submit('planCofirme')" v-if="!checkflow(14, '确认')">确认</el-button>
                <span v-if="planOperator[1]">操作人:{{planOperator[1]}}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- 确认通知 -->
      <div class="pro_second">
        <span class="title">确认通知</span>
        <el-form ref="noticeForm" :model="noticeForm" size="small" label-width="100px" class="demo-form-inline pro_item">
          <el-row>
            <el-col :span="24">
              <el-form-item>
                <span v-if="planForm.isconstruct===0 && isEnd">施工已取消!</span>
                <span v-if="planForm.isconstruct===0 && !isEnd">申请取消施工中!</span>
                <span v-else-if="personNotices.length>0">
                  <div v-for="(p, index) in personNotices" :key="index">
                    {{p.userName}}(
                    <span :class="p.status===1?'success':''">{{p.status===1?'已确认':'未确认'}}</span>)
                  </div>
                </span>
                <span v-else-if="!checkFlowStatue(5) && isconstruct">请等待......</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- 风险教育文档 -->
      <!-- <div class="pro_second">
        <span class="title">风险教育文档</span>
        <el-form size="small" label-width="100px" class="demo-form-inline pro_item">
          <el-row>
            <el-col :span="24">
              <el-form-item>
                <a :href="noticeForm.notifyArriving">风险教育文档下载阅读</a>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div> -->
      <!-- 集结 -->
      <!-- <div class="pro_second">
        <span class="title">确认人员设备</span>
        <el-form ref="confirmForm" :model="confirmForm" size="small" label-width="100px" class="demo-form-inline pro_item">
          <el-row v-if="baseInfo.status===3">
            <el-col :span="24">
              <el-form-item label="取消原因">
                {{planForm.remark}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-else>
            <el-col :span="12">
              <el-form-item label="人员：">
                {{planForm.personNum}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="车辆：">
                {{planForm.vehicleNum}}
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="设备：">
                <el-tag style="margin-right: 2px" type="info" v-for="(e,index) in planForm.deviceIds" :key="index">{{e.commonName + 'x' + e.commonNum}}
                </el-tag>
              </el-form-item>
            </el-col>
            <el-col :span="24" style="text-align: right">
              <el-form-item>
                <el-button type="warning" style="width: 80px" @click="submit('confirm')" v-if="noticeForm.status===1&&confirmForm.status!==1&&baseInfo.status===0">确认</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div> -->
      <!-- 摆放标识 -->
      <div class="pro_second">
        <span class="title">摆放标识</span>
        <el-form size="small" label-width="100px" class="demo-form-inline pro_item">
          <el-row>
            <el-col :span="6">
              <el-form-item>
                <span v-if="planForm.isconstruct===0 && isEnd">施工已取消!</span>
                <span v-if="planForm.isconstruct===0 && !isEnd">申请取消施工中!</span>
                <span v-else-if="checkFlowStatue(6) && nowProcessId !== 6 && checkFlowStatue(7)">确认标识已摆放!</span>
                <span v-else-if="nowProcessId === 6 && checkPower(6, '确认')">请确认标识是否已摆放......</span>
                <span v-else-if="nowProcessId === 6 && !checkPower(6, '确认')">等待确认标识是否已摆放......</span>
                <span v-else-if="baseInfo.status === 2">施工已手动结束</span>
                <span v-else-if="!checkFlowStatue(6) && isconstruct">请等待......</span>
              </el-form-item>
            </el-col>
            <el-col :span="24" style="text-align: right">
              <el-form-item>
                <el-button type="warning" style="width: 80px" v-if="!checkflow(6, '确认')" @click="submit('putMark')">确认</el-button>
                <span v-if="entryApplyForm.operator[0] != undefined">操作人：{{entryApplyForm.operator[0]}}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- 安检确认 -->
      <div class="pro_second">
        <span class="title">安检</span>
        <el-form size="small" label-width="100px" class="demo-form-inline pro_item">
          <el-row>
            <el-col :span="6">
              <el-form-item>
                <span v-if="planForm.isconstruct===0 && isEnd">施工已取消!</span>
                <span v-if="planForm.isconstruct===0 && !isEnd">申请取消施工中!</span>
                <span v-else-if="checkFlowStatue(7) && nowProcessId !== 7 && checkFlowStatue(8)">安检已确认!</span>
                <span v-else-if="nowProcessId === 7 && checkPower(7, '确认')">请进行安检确认......</span>
                <span v-else-if="nowProcessId === 7 && !checkPower(7, '确认')">进行安检确认中......</span>
                <span v-else-if="baseInfo.status === 2">施工已手动结束</span>
                <span v-else-if="!checkFlowStatue(7) && isconstruct">请等待......</span>
              </el-form-item>
            </el-col>
            <el-col :span="24" style="text-align: right">
              <el-form-item>
                <el-button type="warning" style="width: 80px" @click="submit('safe')" v-if="!checkflow(7, '确认')">确认</el-button>
                 <span v-if="entryApplyForm.operator[1] != undefined">操作人：{{entryApplyForm.operator[1]}}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- 等待审批 -->
      <div class="pro_second">
        <span class="title">等待审批</span>
        <el-form size="small" label-width="100px" class="demo-form-inline pro_item">
          <el-row>
            <el-col :span="6">
              <el-form-item>
                <span v-if="planForm.isconstruct===0 && isEnd">施工已取消!</span>
                <span v-if="planForm.isconstruct===0 && !isEnd">申请取消施工中!</span>
                <span v-else-if="checkFlowStatue(8) && nowProcessId !== 8 && checkFlowStatue(15)">确认可以进场施工!</span>
                <span v-else-if="nowProcessId === 8 && checkPower(8, '确认')">请指挥部确认是否可以进场施工......</span>
                <span v-else-if="nowProcessId === 8 && !checkPower(8, '确认')">等待指挥部确认是否可以进场施工......</span>
                <span v-else-if="baseInfo.status === 2">施工已手动结束</span>
                <span v-else-if="!checkFlowStatue(8) && isconstruct">请等待......</span>
              </el-form-item>
            </el-col>
            <el-col :span="24" style="text-align: right">
              <el-form-item>
                <el-button type="warning" style="width: 80px" @click="submit('lead')" v-if="!checkflow(8, '确认')">确认</el-button>
                <span v-if="entryApplyForm.operator[2] != undefined">操作人：{{entryApplyForm.operator[2]}}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- 开始施工 -->
      <div class="pro_second">
        <span class="title">开始施工</span>
        <el-form size="small" label-width="100px" class="demo-form-inline pro_item">
          <el-row>
            <el-col :span="24">
              <el-form-item>
                <span v-if="planForm.isconstruct===0 && isEnd">施工取消</span>
                <span v-else-if="planForm.isconstruct===0 && !isEnd">申请取消施工中!</span>
                <span v-else-if="planForm.isconstruct!==0 && nowProcessId === 15">施工中!</span>
                <span v-else-if="baseInfo.status === 1||baseInfo.status === 2">{{baseInfo.status === 1?'施工结束':'手动结束'}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item>
                <el-col :span="12" style="text-align: right" v-show="!checkflow(15, '施工结束')">
                  <el-button type="warning" style="width: 80px;margin-right: 10px" @click="submit('applyEnd')">施工结束</el-button>
                </el-col>
                <el-col :span="12" :push="!checkflow(15, '施工结束')?0:12" style="text-align: left" v-show="checkPower(15, '手动结束') && baseInfo.status === 0 && !isEnd && isNotOverdue && checkFlowStatue(4)">
                  <el-button type="danger" style="width: 80px;margin-left: 10px" @click="submit('end')">手动结束</el-button>
                </el-col>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- 应急事件 -->
      <div class="pro_second">
        <span class="title">应急事件</span>
        <el-form :model="urgentForm" size="small" label-width="100px" class="demo-form-inline pro_item">
          <el-row>
            <el-col :span="24">
              <el-form-item label="应急事件">
                <el-input type="textarea" v-model="urgentForm.event" :disabled="!isNotOverdue||isNotConstruct" placeholder="事件描述"
                  style="width: 100%">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24" style="text-align: right">
              <el-form-item>
                <el-button type="warning" style="width: 80px" v-if="!(!isNotOverdue||isNotConstruct)" @click="eventSubmit">确认</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- 监理确认 -->
      <div class="pro_second">
        <span class="title">监理确认</span>
        <el-form size="small" label-width="100px" class="demo-form-inline pro_item">
          <el-row v-if="planForm.isconstruct === 0">
            <el-col :span="24">
              <el-form-item label="取消原因">
                {{planForm.remark}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-else>
            <el-col :span="6">
              <el-form-item label="材料">
                FOD防范材料堆放点
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="人员">
                {{planForm.personNum}}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="车辆">
                {{planForm.vehicleNum}}
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="设备">
                <el-tag style="margin-right: 2px" type="info" v-for="(e,index) in planForm.deviceIds" :key="index">{{e.commonName + 'x' + e.commonNum}}
                </el-tag>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="应急事件">
                {{urgentForm.event}}
              </el-form-item>
            </el-col>

          </el-row>
          <el-row>
            <el-col :span="24" style="text-align: right">
              <el-form-item>
                <el-button type="warning" style="width: 80px" @click="submit('watchReview')" v-if="!checkflow(11, '确认')">确认</el-button>
                <span v-if="review.operator[0]">操作人：{{review.operator[0]}}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!-- 安检确认 -->
      <div class="pro_second">
        <span class="title">安检确认</span>
        <el-form size="small" label-width="100px" class="demo-form-inline pro_item">
          <el-row v-if="planForm.isconstruct === 0">
            <el-col :span="24">
              <el-form-item label="取消原因">
                {{planForm.remark}}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-else>
            <el-col :span="6">
              <el-form-item label="材料">
                FOD防范材料堆放点
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="人员">
                {{planForm.personNum}}
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="车辆">
                {{planForm.vehicleNum}}
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="设备">
                <el-tag style="margin-right: 2px" type="info" v-for="(e,index) in planForm.deviceIds" :key="index">{{e.commonName + 'x' + e.commonNum}}
                </el-tag>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="应急事件">
                {{urgentForm.event}}
              </el-form-item>
            </el-col>
            <el-col :span="24" style="text-align: right">
              <el-form-item>
                <el-button type="warning" style="width: 80px" @click="submit('safeReview')" v-if="!checkflow(12, '确认')">确认</el-button>
                 <span v-if="review.operator[1] != undefined">操作人：{{review.operator[1]}}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-card>
    <UtilModal :isOpen="isOpen" :data="planForm.deviceIds" v-on:modalClose="closeModal" />
  </div>
</template>
<script>
  import UtilModal from "./modal";
  import FlowSteps from "../../components/proSteps.vue";
  import Editor from "../../components/editor/ue.vue";
  import socketIo from 'socket.io-client';
  import {socketIOUrl} from '../../lib/config/config';
  import {
    mapState
  } from "vuex";
  import {
    baseConfig,
    construction
  } from "../../service/service_zbw";

  import {
    imgUrl
  } from "../../lib/config/config";
  import {
    dateFormat,
    formCheck,
    trim
  } from "../../lib/utils";
  export default {
    props: {
      projectId: {
        type: String
      },
      flowId: {
        type: Number
      },
      personsList: {
        type: Array
      }
    },
    components: {
      UtilModal,
      FlowSteps,
      Editor
    },
    data() {
      //设备名称校验
      const checkInput = (rule, value, callback) => {
        let str = trim(value);
        if (!str) {
          return callback(new Error("输入内容不能为空"));
        } else {
          callback();
        }
      };
      //设备名称校验
      const checkDate = (rule, value, callback) => {
        if (!value) {
          return callback(new Error("请选择时间"));
        } else {
          callback();
        }
      };
      //设备名称校验
      const checkSelect = (rule, value, callback) => {
        if (!value) {
          return callback(new Error("请选择内容"));
        } else {
          callback();
        }
      };

      //
      const checkPlan = (rule,value,callback) =>{
        if(value){
          callback();
        }else{
          callback();
        }
      };
      return {

        submitFileContent: false,
        //当前流程id
        //flowId: 30,
        //基础信息
        baseInfo: {
          flowDate: null, // 施工结束时间
          constructDeptId: "",
          constructDeptName: "", // 施工单位名称
          supervisorDeptId: "",
          supervisorDeptName: "", // 监理单位名称
          detectionDeptName: "", // 检测单位
          deptName: "", // 项目所属部门
          contractDate: "", // 项目工期
          projectName: "", // 项目名称
          flowName: "", // 流程名称
          flowId: "", // 流程ID
          flowNumber: "", // 流程根据时间戳生成的编号
          flowProcesses: [], // 所有流程
          status: "" //状态
        },
        //施工风险
        riskForm: {
          preparationId: null,
          //进场时间
          approachDate: "",
          //进场路线
          approachPath: "",
          //状态
          status: ""
        },
        riskRules: {
          approachDate: [{
            required: true,
            validator: checkDate,
            trigger: "change"
          }],
          approachPath: [{
              required: true,
              validator: checkInput,
              trigger: "blur"
            },
            {
              min: 1,
              max: 50,
              message: '长度在 1 到 50 个字符',
              trigger: 'blur'
            }
          ]
        },
        //施工计划
        planForm: {
          planId: null,
          //施工单位
          deptId: "",
          //监理单位
          supervisor: "",
          //申请日期
          applyDate: "",
          //执行经理
          execManager: "",
          //现场管理
          siteAdmin: "",
          //技术负责
          techDirector: "",
          //安全负责人
          safeDirector: "",
          //安全员
          safetyOfficer: "",
          //施工人员
          personNum: "",
          //施工车辆
          vehicleNum: "",
          //设备
          deviceIds: [],
          //计划
          constructionContent: [{
              initialContent: "",
              content: "",
              type: 1
            },
            {
              initialContent: "",
              content: "",
              type: 2
            }
          ],
          //   constructionContent: {
          //     // 区域
          //     area: '',
          //     // 施工类型，1-今日、2-明日
          //     type: 1,
          //     // 完成工作量
          //     completion: '',
          //     // 累计完成量
          //     totalCompletion: '',
          //     // 完成百分比
          //     percentCompletion: '',
          //     // 施工时间
          //     date: ''
          //   },
          //天气信息
          weatherContent: "",
          //不施工备注
          remark: "",
          //状态
          status: "",
          isconstruct: ""
        },
        //施工计划节点操作人
        planOperator:[],
        //是否施工
        isconstruct: true,
        personNotices: [],
        //监理单位是否确认
        //planCofirme: false,
        planRules: {
          deptId: [{
            required: true,
            validator: checkSelect,
            trigger: "change"
          }],
          supervisor: [{
            required: true,
            validator: checkSelect,
            trigger: "change"
          }],
          applyDate: [{
            required: true,
            validator: checkDate,
            trigger: "change"
          }],
          execManager: [{
            required: true,
            validator: checkSelect,
            trigger: "change"
          }],
          siteAdmin: [{
            required: true,
            validator: checkSelect,
            trigger: "change"
          }],
          techDirector: [{
            required: true,
            validator: checkSelect,
            trigger: "change"
          }],
          safeDirector: [{
            required: true,
            validator: checkSelect,
            trigger: "change"
          }],
          safetyOfficer: [{
            required: true,
            validator: checkSelect,
            trigger: "change"
          }],
          constructionContent: [{
            required: true,
            validator: checkInput,
            trigger: "blur"
          }],
          weatherContent: [{
              required: true,
              validator: checkInput,
              trigger: "blur"
            },
            {
              min: 1,
              max: 100,
              message: '长度在 1 到 100 个字符',
              trigger: 'blur'
            }
          ],
          remark: [{
            required: true,
            validator: checkInput,
            trigger: "blur"
          }],
          todayPlan: [{
            required: true,
            validator: checkPlan,
            trigger: "blur"
          }],
          tomorrowPlan: [{
            required: true,
            validator: checkPlan,
            trigger: "blur"
          }]
        },
        //提前通知到达
        noticeForm: {
          personList: [],
          //通知是否发送
          status: "",
          //风险教育文档地址
          riskHref: ""
        },
        //通知确认
        //noticeCofirme: false,
        //集结
        confirmForm: {
          //状态
          status: ""
        },
        //申请进入
        entryApplyForm: {
          //标识
          putMark: "",
          entrance: "",
          //状态
          status: "",
          operator:[]
        },
        //摆放标识
        //putMark: false,
        //安检
        //safe: false,
        //指挥部
        lead: false,
        //应急事件
        urgentForm: {
          eventId: null,
          event: ""
        },
        //复查
        review: {
          status: "",
          operator:[]
        },
        options: [{
            value: "选项1",
            label: "黄金糕"
          },
          {
            value: "选项2",
            label: "双皮奶"
          },
          {
            value: "选项3",
            label: "蚵仔煎"
          },
          {
            value: "选项4",
            label: "龙须面"
          },
          {
            value: "选项5",
            label: "北京烤鸭"
          }
        ],
        isOpen: false,
        isOnly: true,

        /************************************ 引人注目 ************************************************/
        isEnd: false, // 是否结束
        nowProcessId: 0, // 0-未开始，-1-已结束
        initProcesses: [],
        disableUpdatePlanAll: false, // 除人员设备车辆信息外其他信息是否不可修改
        disableUpdatePlan: true, // 人员设备车辆信息是否不可修改
        isNotConstruct: false,
        isNotOverdue: true, // 没有过期

        config: {
          elementPathEnabled: false,
          autoHeightEnabled: false,
          initialFrameWidth: null,
          initialFrameHeight: 200,
          toolbars: [
            [
              "insertimage", //多图上传
              "insertorderedlist" //有序列表
              // "fullscreen" //全屏
            ]
          ]
        },
        showContent: true
      };
    },
    computed: {
      ...mapState({
        userRole: state => state.userRole
      })
    },
    methods: {

      /** 建立socket连接 */
      socketConn(currentUserId) {
          console.log('socketConn runing')
          let self = this;
          let socket = socketIo.connect(socketIOUrl);
          socket.on('connect', function() {
              console.log('已连接上服务');
              self.socketConnection = socket;
              socket.on('chat', function(data) {
                console.log("chatData:",data);
                console.log("data.obj.flowBaseInfo.flowId:",data.obj.flowBaseInfo.flowId);
                self.flowId = data.obj.flowBaseInfo.flowId;
             
                setTimeout(()=>{
                  self.$message.info("进度已刷新，正在同步!");
                  self.getDetail();
                },2000);




              });

          });

          socket.on('disconnect', function() {
              console.log('disconnected');
          });

      },
      /**
       * 日期格式化
       */
      format(val) {
        return dateFormat(val);
      },
      /**
       * 通过富文本编辑器获取html内容
       */
      getUEContents() {
        for (let i = 1; i <= this.planForm.constructionContent.length; i++) {
          let plan = this.planForm.constructionContent[i];
          let fileContent = this.$refs["ue" + i][0].getUEContent();
          let fileContentTxt = this.$refs["ue" + i][0].getUEContentTxt();
          plan = {
            initialContent: fileContentTxt,
            content: fileContent,
            type: i
          };
          this.planForm.constructionContent.splice(i - 1, 1, plan);
        }
      },

      /** 
       * 验证指定流程是否不是当前流程
       * 如果结束直接true;
       * 找到当前节点，如果state等于1且是当前进度的id那么返回假
       */
      checkflow(processId, buttonName) { 
        if (this.isEnd) {
          return true;
        }
        if (!this.checkPower(processId, buttonName)) {
          return true;
        }
        if (!this.isNotOverdue) {
          return true;
        }
        for (let i of this.initProcesses) {
          if (processId === i.flowId) {
            if (processId === 13) return !(i.state === 1);
            return !(processId === this.nowProcessId && i.state === 1);
          }
        }
        return true;
      },

      /** 
       * 验证权限
       */
      checkPower(processId, buttonName) {
        return this.checkPowerProcessor(processId, buttonName, null);
      },
      checkPowerProcessor(processId, buttonName, flowProcess) {
        if (flowProcess === null) {
          flowProcess = this.userRole.flowPermissionList || [];
        }
        for (let i of flowProcess) {
          if (i.pId === processId && i.isButton && i.label === buttonName) {
            return i.have;
          } else if (
            this.checkPowerProcessor(processId, buttonName, i.children || [])
          ) {
            return true;
          }
        }
        return false;
      },

      /** 
       * 判断该流程是否已经走过
       */
      checkFlowStatue(processId) {
        for (let i of this.initProcesses) {
          if (processId === i.flowId) {
            return i.state === 1;
          }
        }
        return false;
      },

      /** 
       * 初始化验证设置
       * 判断施工计划是否可改
       */
      initCheckSetting() {
        this.disableUpdatePlanAll = false;
        this.disableUpdatePlan = false;
        this.isEnd = false;
        this.setNowProcessId();
        this.isNotOverdue =
          dateFormat(new Date(this.baseInfo.createDate), "yyyy-MM-dd") ===
          dateFormat(new Date(), "yyyy-MM-dd");
        if (this.isEnd) {
          this.disableUpdatePlanAll = true;
          this.disableUpdatePlan = true;
        }
        for (let i of this.initProcesses) {
          // 施工计划
          if (i.flowId === 13 && i.state === 0) {
            this.disableUpdatePlanAll = true;
            this.disableUpdatePlan = true;
          }

          // 监理单位是否已经确认
          if (
            i.flowId === 14 &&
            i.state === 1 &&
            i.flowId !== this.nowProcessId
          ) {
            this.disableUpdatePlanAll = true;
          }

          // 如果取消施工后已经被监理确认，那么施工立刻结束所以无需额外判断

          // 是否已经安检确认
          if (i.flowId === 7 && i.state === 1 && i.flowId !== this.nowProcessId) {
            this.disableUpdatePlan = true;
          }
        }
      },

      /** 
       * 判断结束时间是否有值，有则将nowProcessId置为-1（已结束）
       * 如果没有则倒序遍历数组获取第一个state等于1的flowId，记录到nowProcessId
       */
      setNowProcessId() {
        if (this.baseInfo.flowDate !== null) {
          this.nowProcessId = -1;
          this.isEnd = true;
          return;
        }
        for (let i = this.initProcesses.length - 1; i >= 0; i--) {
          if (this.initProcesses[i].state === 1) {
            this.nowProcessId = this.initProcesses[i].flowId;
            return;
          }
        }
      },

      /**
       * 获取昨天的明日计划作为今天的今日计划
       */
      async getTodayPlan() {
        let res = await construction.getTodayPlan(this.projectId);
        if (res.success) {
          if (res.obj) {
            res.obj.type = 1;
            this.planForm.constructionContent.splice(0, 1, res.obj);
          }
        }
      },
      /**
       * 获取详细
       */
      async getDetail() {
        console.log("this.flowId:",this.flowId);
        if (!this.flowId) {
          return;
        }
        let res = await construction.getDetail(this.flowId);
        console.log("handleResult start ...");
        this.handleResult(res, true);
        console.log("handleResult end ...");
      },
      /**
       * 整理进程格式
       */
      formatFlowFirst(val) {
        let obj = [];
        for (let i of val) {
          if (i.parentId === 0) {
            this.formatFlowSecond(i, val);
            obj.push(i);
          }
        }
        return obj;
      },
      formatFlowSecond(val, datas) {
        val.children = [];
        val.finish = true;
        for (let i of datas) {
          if (i.parentId === val.flowId) {
            val.children.push(i);
            if (i.state === 0) {
              val.finish = false;
            }
          }
        }
      },
      /**
       * 施工风险信息整理
       */
      riskSubmit() {
        let flag = formCheck(this, "riskForm");
        if (flag) {
          let param = {
            flowId: this.flowId,
            preparationId: this.riskForm.preparationId,
            approachDate: this.riskForm.approachDate,
            approachPath: this.riskForm.approachPath
          };
          this.preparation(param);
        }
      },
      /**
       * 施工风险信息提交
       */
      async preparation(param) {
        let res = await construction.preparation(param);
        this.handleResult(res);
      },
      /**
       * 施工计划信息整理
       */
      planSubmit() {
        this.getUEContents();
        let flag = formCheck(this, "planForm");
        setImmediate(() => {
          if (flag) {
            let param = {
              flowId: this.flowId,
              planId: this.planForm.planId,
              deptId: this.baseInfo.constructDeptId,
              supervisor: this.baseInfo.supervisorDeptId,
              applyDate: this.planForm.applyDate,
              execManager: this.planForm.execManager,
              siteAdmin: this.planForm.siteAdmin,
              techDirector: this.planForm.techDirector,
              safeDirector: this.planForm.safeDirector,
              safetyOfficer: this.planForm.safetyOfficer,
              personNum: this.planForm.personNum,
              vehicleNum: this.planForm.vehicleNum,
              deviceIds: this.planForm.deviceIds,
              constructionContent: this.planForm.constructionContent,
              weatherContent: this.planForm.weatherContent,
              isconstruct: this.isconstruct ? 1 : 0,
              remark: this.planForm.remark
            };
            for (let i of this.planForm.constructionContent) {
              if (i.content === '') {
                this.$message({
                  type: 'error',
                  message: i.type === 1 ? '请填写施工计划' : '请填写明日计划'
                });
                return;
              }
            }
            this.plan(param);
          }
        });
      },
      /**
       * 施工计划信息提交
       */
      async plan(param) {
        let res = await construction.plan(param);
        this.handleResult(res);
      },
      /**
       * 应急事件信息整理
       */
      async eventSubmit() {
        let param = {
          flowId: this.flowId,
          eventId: this.urgentForm.eventId,
          event: this.urgentForm.event
        };
        let res = await construction.urgent(param);
        this.handleResult(res);
      },
      /**
       * 信息整理
       */
      async submit(val) {
        let param = this.flowId;
        let res = null;
        if (val === "planCofirme") {
          res = await construction.watchConfirm(param);
        } else if (val === "notice") {
          //通知确认
          res = await construction.noticeConfirm(param);
        } else if (val === "confirm") {
          //集结
          res = await construction.concentrate(param);
        } else if (val === "putMark") {
          //标识
          res = await construction.putmark(param);
        } else if (val === "safe") {
          //安检
          res = await construction.safe(param);
        } else if (val === "lead") {
          //指挥部
          res = await construction.entryConfirmation(param);
        } else if (val === "applyEnd") {
          //施工结束
          res = await construction.applyEnd(param);
        } else if (val === "end") {
          //手动结束
          res = await construction.manualEnd(param);
        } else if (val === "watchReview") {
          //监理复查
          res = await construction.review(param);
        } else if (val === "safeReview") {
          //安检复查
          res = await construction.reviewSafe(param);
        }
        this.handleResult(res);
      },
      /**
       * 返回处理
       */
      handleResult(res, status) {
        console.log("response:",res);
        this.showContent = false;
        if (!res.success && (res.obj === -5 || res.obj === -6)) {
          this.$message({
            message: res.msg,
            type: "info"
          });
          
          this.getDetail();
        } else if (res.success && res.obj) {
          //流程基本信息
          if (res.obj.flowBaseInfo) {
            console.log("res.obj.flowBaseInfo:",res.obj.flowBaseInfo);
            this.baseInfo = res.obj.flowBaseInfo;
            this.initProcesses = res.obj.flowBaseInfo.flowProcesses;
            this.initCheckSetting();
            this.baseInfo.flowProcesses = this.formatFlowFirst(
              this.baseInfo.flowProcesses
            );
          } else {
            this.baseInfo = {
              constructDeptName: "",
              supervisorDeptName: "",
              detectionDeptName: "",
              deptName: "",
              contractDate: "",
              projectName: "",
              flowName: "",
              flowId: "",
              flowNumber: "",
              flowProcesses: []
            };
          }
          //施工风险
          if (res.obj.personNotices) {
            this.personNotices = res.obj.personNotices;
          }
          if (res.obj.preparation) {
            this.riskForm = res.obj.preparation;
            this.riskForm.approachDate = new Date(this.riskForm.approachDate);
          } else {
            this.resetForm("riskForm");
            this.riskForm = {
              preparationId: null,
              //进场时间
              approachDate: "",
              //进场路线
              approachPath: "",
              //状态
              status: ""
            };
          }
          //施工计划
          if (res.obj.planInfoRes) {
            this.planForm = res.obj.planInfoRes;
            this.isconstruct = this.planForm.isconstruct === 1;
            this.planOperator = res.obj.planInfoRes.operator.split(",");
            // this.planCofirme = (this.planForm.status === 1);
            this.planForm.applyDate = new Date(this.planForm.applyDate);
            this.isNotConstruct = this.planForm.isconstruct === 0
          } else {
            this.isNotConstruct = false;
            this.resetForm("planForm");
            this.planForm.planId = null;
            this.planForm.constructionContent = [{
                initialContent: "",
                content: "",
                type: 1
              },
              {
                initialContent: "",
                content: "",
                type: 2
              }
            ];
          }
          //提前通知到达
          if (res.obj.concentrateNotice) {
            this.noticeForm = res.obj.concentrateNotice;
            // this.noticeCofirme = (this.noticeForm.status === 1);
          } else {
            this.resetForm("noticeForm");
          }
          //集结
          if (res.obj.concentrate) {
            this.confirmForm = res.obj.concentrate;
          } else {
            this.resetForm("confirmForm");
          }
          //申请进入施工区
          if (res.obj.approach) {
            this.entryApplyForm = res.obj.approach;
            this.entryApplyForm.operator = this.entryApplyForm.operator.split(",");
            // this.putMark = (this.entryApplyForm.putMark === 1);
            // this.safe = (this.entryApplyForm.entrance >= 2);
            this.lead = this.entryApplyForm.entrance >= 2;
          } else {
            this.entryApplyForm = {
              putMark: false,
              safe: false,
              lead: false,
              status: "",
              operator:[]
            };
          }
          //复查
          if (res.obj.review) {
            this.review = res.obj.review;
            if(this.review.operator){
              this.review.operator = this.review.operator.split(",");
            }
            
          } else {
            this.review.operator=[];
          }
          //应急事件
          if (res.obj.event) {
            this.urgentForm = res.obj.event;
          } else {
            this.urgentForm = {
              eventId: null,
              event: ""
            };
          }
          if (this.planForm.constructionContent[0].content === "") {
            this.getTodayPlan();
          }
          //出获取信息借口，其余提示成功信息
          if (!status) {
            this.$message({
              message: res.msg,
              type: "success"
            });
          }
        } else {
          this.$message({
            message: res.msg,
            type: "error"
          });
        }
        this.isOnly =
          this.baseInfo.status > 0 ||
          (this.planForm.status === 1 && this.planForm.isconstruct === 1) ||
          (this.planForm.isconstruct === 0 && this.review !== null);
        this.showContent = true;
      },
      /**@function
       * 图片上传
       */
      upload(val) {
        let id = `up${val}`;
        document.getElementById(id).click();
        //
      },

      /** 校验图片格式 */
      checkImg: function(fileName){
        var flag = false; //状态
        var arr = ["jpg","jpeg"];
        //取出上传文件的扩展名
        var index = fileName.lastIndexOf(".");
        var ext = fileName.substr(index+1);
        //循环比较
        for(var i=0;i<arr.length;i++)
        {
          if(ext == arr[i]){
           return true; //一旦找到合适的，返回true
          }
        }
        return false;
      },
      async fileFull(val) {
        let id = `up${val}`;
        let files = document.getElementById(id).files;
        if (document.getElementById(id).value !== "") {
          if(this.checkImg(files[0].name) === false){
            this.$message.error("请上传jpg或jpeg格式的文件");
            return;
          }
          let res = await baseConfig.upLoad(files[0]);
          if (res.result) {
            let html = `<img src="${imgUrl}/${res.obj}"><br/>`;
            let con = this.$refs[`ue${val}`][0].getUEContent();
            for (let i of this.planForm.constructionContent) {
              if (i.type === val) {
                i.content = `${con}${html}`;
                break;
              }
            }
          } else {
            this.$message({
              type: "error",
              message: res.msg
            });
          }
        }
        document.getElementById(id).value = "";
      },
      resetAll() {
        //初始化所有信息  
        //初始化基础信息
        this.baseInfo = {
          constructDeptName: "",
          supervisorDeptName: "",
          detectionDeptName: "",
          deptName: "",
          contractDate: "",
          projectName: "",
          flowName: "",
          flowId: "",
          flowNumber: "",
          flowProcesses: []
        };
        //初始化施工风险
        this.resetForm("riskForm");
        this.riskForm = {
          preparationId: null,
          //进场时间
          approachDate: "",
          //进场路线
          approachPath: "",
          //状态
          status: ""
        };
        //初始化施工计划
        this.resetForm("planForm");
        this.planForm.planId = null;
        this.planForm.constructionContent = [{
            initialContent: "",
            content: "",
            type: 1
          },
          {
            initialContent: "",
            content: "",
            type: 2
          }
        ];
        this.isconstruct = true;
        this.resetForm("noticeForm");
        this.personNotices = [];
        this.resetForm("confirmForm");
        //初始化紧急事件
        this.urgentForm = {
          eventId: null,
          event: ""
        };
        this.entryApplyForm = {
          //标识
          putMark: "",
          entrance: "",
          //状态
          status: "",
          operator:[]
        };
        this.lead = false;
        this.isEnd = false; // 是否结束
        this.nowProcessId = 0; // 0-未开始，-1-已结束
        this.initProcesses = [];
        this.disableUpdatePlanAll = false; // 除人员设备车辆信息外其他信息是否不可修改
        this.disableUpdatePlan = true; // 人员设备车辆信息是否不可修改
        this.isNotConstruct = false;
        this.isNotOverdue = true; // 没有过期
      },
      /**
       * 移除所选工具
       */
      removeEquipment(index) {
        this.planForm.deviceIds.splice(index, 1);
      },
      /**
       * 打开模态框
       */
      openModal() {
        this.isOpen = true;
      },
      /**
       * 关闭模态框
       */
      closeModal(val) {
        this.isOpen = val.modal;
        if (val.status) {
          for(let i = 0; i < val.value.length-1; i++){
            for(let j = i+1; j < val.value.length; j++){
              if(val.value[i].commonId == val.value[j].commonId){
                this.$message.error("设备不能重复！");
                return;
              }
            }
          }
          this.planForm.deviceIds = val.value;
        }
      },
      /**
       * 清空表单
       */
      resetForm(formName) {
        try {
          this.$refs[formName].resetFields();
        } catch (error) {}
      }
    },
    watch: {
      flowId(newval) {
        console.log("newval:",newval);
        if (!newval) {
          this.resetAll();
          return;
        }
        this.$nextTick(() => {
          this.getDetail();
        });
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.getDetail();
      });
      this.socketConn();
    }
  };

</script>

<style scoped>
  .body_content {
    height: 100%;
  }

  .box-card {
    width: 100%;
    overflow-y: auto;
  }

  .pro_name {
    margin-left: 20px;
    margin-bottom: 24px;
    padding-top: 20px;
    font-size: 14px;
    color: #333;
    display: block;
  }

  .pro_first {
    margin-left: 30px;
    display: flex;
  }

  .pro_first div {
    margin-right: 40px;
  }

  .pro_first_title {
    font-size: 12px;
    font-weight: bold;
    color: #999;
  }

  .pro_first_content {
    font-size: 14px;
    color: #333;
  }

  .pro_progress {
    width: 100%;
    height: 210px;
    margin-top: 18px;
    background: url("../../assets/bthsg_lc_pc.png") no-repeat;
    background-size: cover;
  }

  .pro_first_second {
    height: 53px;
    line-height: 53px;
  }

  .pro_first_second .title {
    font-size: 14px;
    color: #333;
  }

  .pro_first_second .content {
    font-size: 12px;
    color: #666;
  }

  .pro_second {
    padding: 0 30px;
    padding-top: 20px;
  }

  .pro_second_bg {
    background: #f7f7f7;
  }

  .pro_second .title {
    padding-bottom: 4px;
    font-size: 14px;
    color: #666;
    font-weight: bold;
    border-bottom: 3px solid #5cb95c;
  }

  .pro_third {
    margin-left: 54px;
  }

  .pro_item {
    margin-top: 20px;
  }

  .pro_second:nth-child(odd) {
    background: #f7f7f7;
  }

  .success {
    color: #5cb95c;
  }

  .file-upload {
    width: 25px;
    height: 42px;
    position: absolute;
    background: transparent;
    left: 5px;
    top: 5px;
    z-index: 999;
  }

  .no-flow {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #fff url(../../assets/nullflow.png) center no-repeat;
    z-index: 1002;
    border-radius: 2px
  }

</style>

